<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <script src="http://d3js.org/d3.v2.js"></script>
  <script>
      <%=json_str%>
  </script>


  <style type="text/css">
      body {
          overflow: hidden;
          margin: 0;
          font-size: 14px;
          font-family: "Helvetica Neue", Helvetica;
      }

      #chart, #header, #footer {
          position: absolute;
          top: 0;
      }

      #header, #footer {
          z-index: 1;
          display: block;
          font-size: 36px;
          font-weight: 300;
          text-shadow: 0 1px 0 #fff;
      }

      #header.inverted, #footer.inverted {
          color: #fff;
          text-shadow: 0 1px 4px #000;
      }

      #header {
          top: 80px;
          left: 140px;
          width: 1000px;
      }

      #footer {
          top: 680px;
          right: 140px;
          text-align: right;
      }

      rect {
          fill: none;
          pointer-events: all;
      }

      pre {
          font-size: 18px;
      }

      line {
          stroke: #000;
          stroke-width: 1.5px;
      }

      .string, .regexp {
          color: #f39;
      }

      .keyword {
          color: #00c;
      }

      .comment {
          color: #777;
          font-style: oblique;
      }

      .number {
          color: #369;
      }

      .class, .special {
          color: #1181B8;
      }

      a:link, a:visited {
          color: #000;
          text-decoration: none;
      }

      a:hover {
          color: #666;
      }

      .hint {
          position: absolute;
          right: 0;
          width: 1280px;
          font-size: 12px;
          color: #999;
      }

      .chart {
          display: block;
          margin: auto;
          margin-top: 60px;
          font-size: 11px;
      }

      rect {
          stroke: #eee;
          fill: #aaa;
          fill-opacity: .8;
      }

      rect.parent {
          cursor: pointer;
          fill: steelblue;
      }

      text {
          pointer-events: none;
      }

      .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 1.5px;
      }

      .node {
        font: 10px sans-serif;
      }

      .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
      }


  </style>
</head>
<body>
<div id="body">

  <div id="footer">
    d3.layout.tree
  </div>

</div>
<script type="text/javascript">


    var json = data;
    var radius = 960 / 2;

    var tree = d3.layout.tree()
            .size([360, radius - 120])
            .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

    var diagonal = d3.svg.diagonal.radial()
            .projection(function (d) { return [d.y, d.x / 180 * Math.PI]; });

    var vis = d3.select("#body").append("div")
            .attr("id", "chart")
            .append("svg")
            .attr("width", radius * 2)
            .attr("height", radius * 2 - 150)
            .append("g")
            .attr("transform", "translate(" + radius + "," + radius + ")");

    var nodes = tree.nodes(json);

    var link = vis.selectAll("path.link")
            .data(tree.links(nodes))
            .enter().append("path")
            .attr("class", "link")
            .attr("d", diagonal);

    var node = vis.selectAll("g.node")
            .data(nodes)
            .enter().append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

    node.append("circle")
            .attr("r", 4.5);

    node.append("text")
            .attr("dy", ".31em")
            .attr("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; })
            .attr("transform", function (d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
            .text(function (d) { return d.name; });


</script>
</body>
</html>
